<template>
  <div id="emptyWeightCharts" class="clearFix bgc-fff card-shadow">
    <div class="clearFix">
      <canvas></canvas>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import echarts from 'echarts'
  export default {
    name: '',
    data() {
      return {
      }
    },
    components: {
    },
    created() {
    },
    mounted() {
      // this.initCharts()
    },
    methods: {
      initCharts(data1, data2) {
        // const that = this
        console.log('emptyWeightCharts-initCharts()', data1, data2)
        const myChart = echarts.init(document.getElementById('emptyWeightCharts'))
        const option = {
          title: {
            text: '重载率 月份/%',
            left: 'left',
            textStyle: {
              color: '#333'
            }
          },
          tooltip: {
            trigger: 'axis',
            confine: true,
            axisPointer: {
              type: 'shadow'
            },
            'formatter': '{b} 重载率<br/> {a} : {c}% <br/> {a1} : {c1}%'
          },
          legend: {
            data: ['去年同期', '今年同期']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          yAxis: {
            type: 'category',
            data: data1.map(function(item) {
              return item.name + '月'
            }),
            name: '月份'
          },
          series: [
            {
              name: '去年同期',
              type: 'bar',
              data: data1.map(function(item) {
                return item.value
              })
            },
            {
              name: '今年同期',
              type: 'bar',
              data: data2.map(function(item) {
                return item.value
              })
            }
          ]
        }
        // 清空画布防止缓存
        myChart.clear()
        // 设置数据层 需先setOption() 后才能getComponent()
        myChart.setOption(option, true)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  #emptyWeightCharts{
    margin: 0 0 0 0;
    width:100%;
    height: 400px;
  }
</style>

